<template>
  <el-cascader
    clearable
    :disabled="disabled"
    filterable
    class="dept-select"
    :model-value="modelValue"
    :show-all-levels="false"
    :style="{ width }"
    :options="deptTree"
    :props="defineProps"
    @change="handleChange"
  />
</template>

<script>
  import { getFormRegionList } from '@/api/QC.js';
  /** 业务组件-部门下拉选择器 */
  export default {
    name: 'DeptSelector',
    components: {},
    props: {
      modelValue: {
        type: [String, Number, Array], // 如果绑定值为数组，则为多选,否则为单选
        default() {
          return '';
        },
      },
      optionId: {
        type: [Number, String], // 选项ID，当已经选中其中一项之后，只需要当前项以及其中的子项时，只需将当前项id传进来就行。
        default: '',
      },
      isFormSelect: {
        // 是否为表单选择框
        type: Boolean,
        default: false,
      },
      disabled: {
        type: Boolean,
        default: false,
      },
      width: {
        type: String,
        default: '',
      },
      valueKey: {
        // id或者code
        type: String,
        default: 'id',
      },
      isMultiple: {
        type: Boolean,
        default: false,
      },
      checkStrictly: {
        type: Boolean,
        default: undefined,
      },
      isObjectValue: {
        // 是否需要对象类型的值
        type: Boolean,
        default: false,
      },
    },
    emits: ['update:modelValue', 'change'],
    data() {
      return {
        deptTree: [],
        groupList: [],
        defineProps: {
          multiple: this.isMultiple,
          checkStrictly: this.checkStrictly !== undefined ? this.checkStrictly : !this.isMultiple, // 单选模式下、可选任意一级
          value: this.valueKey,
          label: 'name',
          children: 'children',
          expandTrigger: 'hover',
        },
      };
    },
    watch: {},
    created() {
      this.getFormRegionList();
    },
    methods: {
      // 获取分组-表单
      async getFormRegionList() {
        const data = await getFormRegionList({
          module: this.$route.meta.key,
          // regionId: this.actionDistrict,
        });
        if (data && data.data) {
          this.deptTree = data.data.map((e) => {
            return {
              ...e,
              name: e.groupName,
              userId: e.groupId,
              children: e.formList,
              id: e.groupId,
            };
          });
        }
      },
      handleChange(val) {
        console.log('handleChange', val);
        // let itemObj = []
        // if (val) {
        //   itemObj = val.map((e) => {
        //     return this.deptList.find(i => i.id === e)
        //   })
        // }
        this.$emit('update:modelValue', val);
        this.$emit('change', val);
      },
    },
  };
</script>

<style lang="scss">
  .dept-select.el-cascader {
    width: 100%;
    margin-bottom: 0px;
    height: 32px;
    .el-input {
      height: 32px;
    }
    .el-cascader__tags {
      height: 32px;
      display: flex;
      flex-direction: column;
      overflow: auto;
    }
  }
</style>
